Radial Gradients in Figma

Radial Gradient in Figma is a type of gradient in which colors spread outward from a central point in a circular or elliptical pattern. Unlike a Linear Gradient, which changes color along a straight line, a Radial Gradient creates a smooth transition from the center toward the edges of an object. Radial gradients are useful for creating depth, lighting effects, glowing backgrounds, soft highlights, buttons, cards, illustrations, hero sections, icons, and modern UI designs.

Figma provides gradient tools that allow designers to control the gradient center, direction, size, color stops, opacity, and overall appearance directly on the canvas. Radial gradients are especially useful in advanced visual design because they can create a sense of focus and depth without using complex images.

Learn more about professional Figma and UI/UX design through JustAcademy Figma Training and practice your skills through real-world design projects.

1. What is a Radial Gradient?

A Radial Gradient is a gradual transition between two or more colors that begins from a central point and expands outward. The color closest to the center usually appears first, while the other color or colors gradually appear toward the outer area.

For example, a blue radial gradient can start with a bright blue center and gradually transition into a dark purple edge.

Center Color

     ↓
Bright Blue
     ↓
Blue
     ↓
Purple
     ↓
Dark Purple
     ↓
Outer Edge

2. Radial Gradient vs Linear Gradient

3. Why Use Radial Gradients?

• Create soft lighting effects.
• Highlight important areas of a design.
• Create glowing backgrounds.
• Add visual depth to cards and buttons.
• Create modern hero-section backgrounds.
• Enhance illustrations and icons.
• Create attractive app interfaces.
• Build futuristic and technology-focused UI designs.
• Create spotlight effects without using images.
• Improve visual hierarchy by directing attention toward a specific area.

4. Where Are Radial Gradients Used in Figma?

Radial gradients can be applied to many Figma objects, including:

• Rectangles
• Frames
• Buttons
• Cards
• Icons
• Illustrations
• Background shapes
• Hero sections
• Text objects
• Navigation elements
• Dashboard widgets
• Mobile app screens

5. Creating a Radial Gradient in Figma

1. Create or select an object on the Figma canvas.
2. Open the Design panel.
3. Locate the Fill section.
4. Click the color fill.
5. Open the fill type options.
6. Select Radial Gradient.
7. Figma displays gradient handles on the selected object.
8. Adjust the center point.
9. Change the gradient colors.
10. Adjust the gradient radius and color-stop positions.

Select Object

      ↓
Open Design Panel
      ↓
Fill
      ↓
Gradient Options
      ↓
Radial Gradient
      ↓
Adjust Center
      ↓
Adjust Color Stops
      ↓
Adjust Radius
      ↓
Final Design

6. Understanding Radial Gradient Handles

When a radial gradient is applied, Figma displays editable handles directly on the canvas. These handles allow designers to control the position and size of the gradient.

• Center Point: Controls where the gradient begins.
• Radius Handle: Controls how far the gradient spreads.
• Color Stops: Control where individual colors appear.
• Stop Position: Controls the distribution of colors.

7. Gradient Center Point

The center point is one of the most important controls of a radial gradient. It determines the location from which the gradient begins.

A centered gradient creates a balanced effect, while moving the center toward one side can create a directional lighting effect.

Centered:

+----------------------+
|          ●           |
|       Gradient       |
|      expands         |
|      outward         |
+----------------------+
 
Off-Center:
+----------------------+
|   ●                  |
|    \                 |
|     \ Gradient       |
|      \ expands       |
+----------------------+

8. Moving the Gradient Center

To create more dynamic designs, move the gradient center away from the middle of the object. For example, placing a bright center near the top-left corner can make the design appear illuminated from that direction.

This technique is commonly used in cards, landing pages, dashboards, product banners, and decorative backgrounds.

9. Gradient Radius

The radius determines how quickly the gradient expands from the center toward the outer area. A smaller radius produces a concentrated effect, while a larger radius creates a softer and more widely distributed transition.

10. Basic Two-Color Radial Gradient

A basic radial gradient can use two colors. The first color appears around the center and gradually transitions into the second color toward the edges.

Example:

Center: #2563EB

Edge:   #7C3AED
 
Result:
Blue Center
     ↓
Blue
     ↓
Blue-Purple
     ↓
Purple Edge

11. Blue and Purple Radial Gradient

A blue-to-purple combination is useful for modern technology interfaces, SaaS products, dashboards, landing pages, and digital product designs.

Center Color: #2563EB

Outer Color:  #7C3AED

The bright blue center creates focus while the purple edge adds visual depth.

12. Teal and Blue Radial Gradient

A teal-to-blue radial gradient can create a fresh and energetic visual effect.

Center Color: #06B6D4

Outer Color:  #2563EB

This combination can be used for technology dashboards, finance applications, analytics screens, and modern landing pages.

13. Orange and Pink Radial Gradient

Warm color combinations can be used for creative applications, promotional designs, social media interfaces, and visually expressive landing pages.

Center Color: #F97316

Outer Color:  #EC4899

14. Multiple Color Stops

Radial gradients do not have to contain only two colors. Multiple color stops can be used to create richer transitions.

Center

  ↓
#60A5FA
  ↓
#2563EB
  ↓
#7C3AED
  ↓
#4C1D95
  ↓
Edge

Multiple stops should be used carefully because too many colors can make the gradient visually noisy.

15. Color Stop Position

A color stop determines where a particular color appears within the gradient. Moving a color stop closer to the center makes that color appear earlier, while moving it outward extends the previous color.

16. Gradient Opacity

Opacity can be used to make one or more gradient stops partially transparent. This is especially useful for overlays, glowing effects, image backgrounds, and glassmorphism.

For example, a gradient can start with a visible purple color in the center and gradually become transparent toward the edges.

Center:

Purple 100%
 
Middle:
Purple 50%
 
Edge:
Purple 0%

17. Transparent Radial Gradient

A transparent radial gradient is useful when the designer wants an object to visually fade into the background.

Common applications include:

• Image overlays
• Spotlights
• Glow effects
• Decorative backgrounds
• Hero section lighting
• Modal overlays

18. Creating a Glow Effect

A glow can be created by using a bright color at the center and making the outer portion transparent.

Bright Center

     ↓
Strong Glow
     ↓
Soft Glow
     ↓
Transparent Edge

For example, use a bright cyan center with decreasing opacity toward the outside.

19. Radial Gradient for Buttons

Radial gradients can be used inside buttons to create a subtle light source. The center can be positioned near the top-left portion of the button while the darker color occupies the remaining area.

+----------------------+

|  Bright ●            |
|        Button        |
|             Dark     |
+----------------------+

A subtle gradient can make the button feel visually dimensional without requiring heavy shadows.

20. Radial Gradient Button Example

Button Background

Center: #60A5FA
Outer:  #2563EB
 
Text:
"Get Started"

Keep the gradient subtle enough that the button label remains easy to read.

21. Button Hover State

Radial gradients can also be used for interactive button states. A hover state may increase the brightness around the center or slightly change the gradient position.

22. Radial Gradient in Cards

A subtle radial gradient can be used as a background layer inside a card. It can highlight an icon, title, product image, or important information.

+--------------------------------+

|        ● Glow                  |
|                                |
|       Product Card             |
|                                |
|       Title                    |
|       Description              |
|                                |
|       [ View Product ]         |
+--------------------------------+

23. Radial Gradient in Hero Sections

Hero sections are one of the most common places for decorative radial gradients. Multiple soft radial gradients can create an attractive background without using a large image.

+------------------------------------------------+

|       ● Blue Glow                              |
|                                                |
|              MAIN HEADLINE                    |
|              Supporting text                  |
|              [ Get Started ]                  |
|                                 ● Purple Glow  |
+------------------------------------------------+

24. Radial Gradient Backgrounds

A radial gradient can cover an entire frame and act as the visual foundation of a webpage or mobile screen. When used as a background, maintain sufficient contrast between the background and foreground content.

25. Radial Gradient for Mobile App Screens

Radial gradients can be used in mobile application screens for onboarding pages, login screens, profile headers, dashboard cards, and promotional banners.

For mobile screens, avoid placing very bright gradients behind small text because the gradient may reduce readability.

26. Radial Gradient in Login Screens

A login page can use a subtle radial gradient behind the login card to create depth.

Mobile Login Screen

        ↓
Background
        ↓
Soft Radial Glow
        ↓
Login Card
        ↓
Email Field
        ↓
Password Field
        ↓
Login Button

27. Radial Gradient in Dashboard Design

Dashboard interfaces can use radial gradients to highlight statistics or important widgets. A small glow behind a metric can attract attention without changing the information hierarchy.

+---------------------------+

| Revenue                   |
|                           |
|     ● ₹8,45,000           |
|                           |
|     +12.5%                |
+---------------------------+

28. Radial Gradient for Icons

A radial gradient can be applied to an icon container or circular icon background. The gradient can create a soft illuminated appearance.

For example, a blue icon background can use a lighter blue center and a darker blue edge.

29. Radial Gradient for Illustrations

Radial gradients can create lighting and depth in vector illustrations. They are useful for planets, spheres, buttons, lamps, glowing objects, abstract shapes, and decorative elements.

30. Creating a 3D-Looking Circle

A radial gradient can simulate a light source on a circular object.

        Light Source

             ●
          ↙     ↘
       Bright   Medium
          ↘     ↙
            Dark

Place the brightest color slightly away from the exact center and use a darker color toward the opposite edge to suggest lighting direction.

31. Radial Gradient and Glassmorphism

Radial gradients can be combined with transparency, blur, and subtle borders to create glassmorphism-style interfaces.

• Use a transparent or semi-transparent gradient.
• Place the glow behind the glass surface.
• Use a subtle border.
• Use background blur where appropriate.
• Maintain readable text contrast.

32. Radial Gradient Over Images

A transparent radial gradient can be placed above an image to emphasize a particular area. For example, a bright transparent gradient can highlight a product in the center of a promotional banner.

Image Layer

    ↓
Radial Gradient Overlay
    ↓
Text / CTA
    ↓
Final Hero Design

33. Radial Gradient and Visual Hierarchy

Visual hierarchy describes how users notice and process elements in a design. A radial gradient can support hierarchy by making one area brighter or more visually prominent.

Use this technique carefully so that decorative lighting does not compete with primary content.

34. Radial Gradient and Accessibility

Gradients should not reduce the readability of text or controls. When placing text over a radial gradient, check contrast across the entire text area rather than checking only one point.

• Test light text against bright areas.
• Test dark text against light areas.
• Do not use gradients as the only indicator of status.
• Keep important controls visually clear.
• Check the design on different screen sizes.

35. Radial Gradient for Brand Design

Brands can use radial gradients as part of a visual identity. A consistent set of colors can be used across buttons, backgrounds, illustrations, and promotional sections.

For example:

Brand Gradient

Center: #06B6D4
Middle: #2563EB
Edge:   #7C3AED

36. Creating a Gradient Palette

A design system can define several radial gradient combinations for different purposes.

37. Radial Gradients and Color Styles

For larger Figma projects, gradient definitions can be documented as part of a design system. Consistent naming makes it easier for designers to identify the intended visual treatment.

Gradients

├── Primary Glow
├── Secondary Glow
├── Accent Glow
├── Dark Glow
├── Success Glow
└── Warning Glow

38. Radial Gradients and Variables

Figma variables can be used to manage design tokens such as colors and spacing. Gradient systems can reference consistent color values so that related components maintain visual consistency.

When the brand palette changes, centralized color management can reduce repetitive editing across a design system.

39. Radial Gradients in Components

Reusable components can contain radial gradients for consistent UI patterns such as promotional cards, avatar backgrounds, statistic cards, buttons, and feature blocks.

When creating components, make sure the gradient serves a defined visual purpose instead of being added only for decoration.

40. Radial Gradients with Variants

Variants can represent different states of a component. A component may have default, hover, active, disabled, success, or warning versions with different gradient treatments.

41. Radial Gradients with Auto Layout

Auto Layout controls the positioning and sizing of UI elements, while a gradient controls visual appearance. They can be used together when designing responsive components.

The gradient should be treated as a visual property of the component while Auto Layout manages the component's structure.

42. Radial Gradients in Responsive Design

When a frame changes size, a radial gradient may visually cover a different area. Always review the gradient at mobile, tablet, and desktop dimensions.

Desktop

Large Frame
    ↓
Large Gradient Area
 
Tablet
Medium Frame
    ↓
Adjusted Gradient
 
Mobile
Small Frame
    ↓
Check Focus + Readability

43. Radial Gradient for Web Design

Modern websites frequently use soft radial gradients in hero sections, feature sections, pricing cards, testimonials, and CTA areas. The gradient should support the content hierarchy rather than overpowering it.

44. Radial Gradient for Mobile UI

In mobile interfaces, use smaller and softer gradients because screen space is limited. A concentrated glow can be useful behind an icon, illustration, or primary CTA.

45. Practical Example: Gradient Product Card

Create a product card with a dark background and a soft blue radial glow behind the product image.

1. Create a card frame.
2. Apply a dark background such as #0F172A.
3. Add a circular or rectangular gradient layer.
4. Apply a radial gradient.
5. Use #60A5FA near the center.
6. Fade the color toward transparency.
7. Place the product image above the glow.
8. Add product title and price.
9. Add a CTA button.
10. Check contrast and spacing.

46. Practical Example: Landing Page Background

Landing Page

│
├── Background
│   ├── Large Radial Glow
│   ├── Secondary Radial Glow
│   └── Dark Base Color
│
├── Navigation
│
├── Hero Content
│   ├── Heading
│   ├── Description
│   └── CTA
│
└── Product Illustration

Use multiple radial gradients carefully so that the background remains visually organized.

47. Practical Example: SaaS Dashboard

Create a SaaS dashboard where the main revenue card contains a subtle radial glow.

Dashboard

│
├── Sidebar
├── Header
├── Statistics
│   ├── Users
│   ├── Orders
│   ├── Revenue
│   └── Growth
└── Charts

The revenue card can use a soft radial gradient behind the number to create emphasis.

48. Practical Example: Login UI

Background

   ↓
Radial Gradient
   ↓
Login Container
   ↓
Logo
   ↓
Email
   ↓
Password
   ↓
Login Button
   ↓
Forgot Password

The gradient should remain subtle enough that the form remains the primary focus.

49. CSS Radial Gradient Equivalent

When a Figma design is handed off to a developer, a radial gradient can be represented in CSS using the radial-gradient() function.

.hero {

background: radial-gradient(circle, #2563EB 0%, #7C3AED 100%);
}

A transparent glow can be represented as:

.glow {

background: radial-gradient(circle, rgba(37, 99, 235, 0.8) 0%, rgba(37, 99, 235, 0) 70%);
}

50. CSS Radial Gradient Position

The CSS equivalent can specify the location of the gradient center.

.hero {

background: radial-gradient(circle at top left, #60A5FA, #1E3A8A);
}

This represents a radial gradient that begins around the top-left area.

51. CSS Multiple Radial Gradients

Multiple radial gradients can be layered to recreate complex background lighting.

.hero {

background:
radial-gradient(circle at 20% 20%, rgba(96, 165, 250, 0.35), transparent 35%),
radial-gradient(circle at 80% 70%, rgba(124, 58, 237, 0.35), transparent 40%),
#0F172A;
}

52. Figma to Developer Handoff

During developer handoff, designers should communicate the gradient colors, opacity, approximate position, intended visual effect, and responsive behavior. Figma's developer handoff workflow can help developers inspect design properties and assets.

Figma Design

     ↓
Gradient Properties
     ↓
Color Values
     ↓
Opacity
     ↓
Position
     ↓
Developer Handoff
     ↓
CSS / Code Implementation

53. Common Radial Gradient Mistakes

• Using too many colors.
• Using extremely bright gradients behind text.
• Creating excessive contrast.
• Placing the gradient center randomly.
• Using gradients on every component.
• Ignoring mobile layouts.
• Using gradients without a clear design purpose.
• Making gradients too saturated.
• Forgetting accessibility and contrast.
• Using inconsistent gradient colors across components.

54. How to Fix a Poor Radial Gradient

1. Reduce the number of colors.
2. Lower the opacity.
3. Move the center toward the intended focal point.
4. Increase the gradient radius for a softer effect.
5. Use related colors instead of unrelated colors.
6. Check text contrast.
7. Compare the gradient with the overall design system.
8. Test the gradient at different screen sizes.

55. Best Practices for Radial Gradients

• Use gradients with a clear visual purpose.
• Prefer smooth transitions.
• Use a controlled color palette.
• Keep decorative gradients subtle.
• Use contrast carefully.
• Maintain consistent brand colors.
• Use transparent gradients for overlays.
• Test gradients on light and dark backgrounds.
• Check responsive behavior.
• Document important gradient styles in the design system.

56. Radial Gradient Design Workflow

Choose Object

     ↓
Choose Visual Purpose
     ↓
Select Radial Gradient
     ↓
Choose Center Color
     ↓
Choose Outer Color
     ↓
Set Color Stops
     ↓
Position Gradient Center
     ↓
Adjust Radius
     ↓
Adjust Opacity
     ↓
Check Contrast
     ↓
Test Responsive Layout
     ↓
Add to Component / Design System

57. Radial Gradient vs Solid Color vs Image

58. Naming Radial Gradient Styles

Consistent naming helps designers and developers understand the purpose of a gradient.

Gradient / Radial / Primary

Gradient / Radial / Secondary
Gradient / Radial / Accent
Gradient / Radial / Dark
Gradient / Radial / Success
Gradient / Radial / Warning

59. Mini Project: Modern SaaS Landing Page

Create a modern SaaS landing page using radial gradients.

1. Create a desktop frame.
2. Create a dark background.
3. Add a blue radial glow near the top-left.
4. Add a purple radial glow near the bottom-right.
5. Create a navigation bar.
6. Create a hero heading.
7. Add supporting text.
8. Create a primary CTA button.
9. Add a dashboard illustration.
10. Use a subtle radial glow behind the illustration.
11. Create feature cards.
12. Apply subtle gradients only where useful.
13. Create responsive mobile layouts.
14. Check text readability.
15. Organize gradient colors and components.

60. Interview Questions on Radial Gradients

1. What is a radial gradient?
2. How is a radial gradient different from a linear gradient?
3. Where can radial gradients be used in UI design?
4. What is a gradient color stop?
5. What does the gradient center control?
6. How can you create a glow effect using a radial gradient?
7. How can transparency be used in a radial gradient?
8. Why should gradients be used carefully behind text?
9. How can radial gradients support visual hierarchy?
10. How can radial gradients be used in responsive designs?
11. How can radial gradients be represented in CSS?
12. What is the difference between radial-gradient() and linear-gradient() in CSS?
13. How can multiple radial gradients be layered?
14. How can radial gradients be included in a design system?
15. What are common mistakes when designing radial gradients?

61. Practical Interview Answer Example

Question: What is a radial gradient in Figma?

Answer: A radial gradient is a gradient that transitions colors outward from a central point. In Figma, designers can control its center, radius, color stops, opacity, and position using the gradient controls on the canvas. It is commonly used for glows, lighting, backgrounds, cards, illustrations, buttons, and modern UI effects.

62. Radial Gradient Checklist

• ☐ Select the correct object.
• ☐ Apply a radial gradient.
• ☐ Choose appropriate colors.
• ☐ Position the gradient center correctly.
• ☐ Adjust the radius.
• ☐ Adjust color-stop positions.
• ☐ Control opacity where necessary.
• ☐ Check text contrast.
• ☐ Test mobile and desktop layouts.
• ☐ Maintain brand consistency.
• ☐ Avoid unnecessary visual complexity.
• ☐ Document reusable gradient styles.

63. Quick Revision

64. Key Takeaways

• Radial gradients create color transitions from a central point.
• They are different from linear gradients because their color flow expands outward.
• The center point strongly affects the visual focus.
• Radius controls the spread of the gradient.
• Multiple color stops can create complex transitions.
• Transparency is useful for glow and overlay effects.
• Radial gradients work well for cards, hero sections, buttons, dashboards, and illustrations.
• Accessibility and readability should always be checked.
• Reusable gradients can be documented as part of a design system.
• Developers can implement similar effects using CSS radial-gradient().

65. Conclusion

Radial Gradients are an important visual design technique in Figma for creating soft color transitions, lighting effects, glows, depth, and modern interface backgrounds. By controlling the center point, radius, color stops, opacity, and color palette, designers can create polished visual effects without relying entirely on images.

Radial gradients become especially powerful when combined with components, variants, Auto Layout, responsive design, design systems, and developer handoff workflows. The key is to use gradients intentionally so they improve visual hierarchy and user experience without reducing readability or creating unnecessary visual noise.

For structured Figma UI/UX learning, practical projects, responsive design, components, gradients, prototyping, and professional design workflows, explore JustAcademy Figma Training.

To explore course enrollment and demo options, visit Register for Figma Course Demo.